<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css">
     <!-- daterange picker -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
     <!-- DataTables -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
	<!-- jQuery 2.1.4 -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
    <script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
	 <!-- AdminLTE App -->
    <script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
    <!-- Select2 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/select2/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
    
         <script src="<s:url value="/resources"/>/adminlte/default.js"></script>
      <script src="<s:url value="/resources"/>/adminlte/default_settlement.js"></script>
      
      <!-- 百度地图 -->
   <style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pWpfYkCbEHczf7UNja4U8FbVnk99U4k8"></script>
</head>
<body class="skin-blue sidebar-mini">
<input type="hidden"  id="falseload"> 
<div>
<style>
#main{overflow: hidden; *zoom: 1;width:100%;}
#left{margin-right:475px;height:900px;
 position:absolute; left:0px; top:0px; bottom:0px; right:0px;
 width:auto;
 z-index:2;
 overflow:hidden;
 }
#right{float:right;width:454px;height:800px;}
 
</style>
<div id="main">
    <div id="left"><div id="allmap" style="width:100%;height: 100%;"></div>      </div>
    <div id="right"  ><div   style="height: 100%;  "> 
<iframe name="mapright"  id="mapright" frameborder=0 width=100% height=100% marginheight=0 marginwidth=0    src="<s:url value="/"/>/baidumapcontroller/getDeliveryInfo">
</iframe>
</div> </div>
</div>

      <script type="text/javascript">
 
	map = new BMap.Map("allmap",{minZoom:5,maxZoom:16});
	map.centerAndZoom(new BMap.Point(108.795963,35.634807), 6);
	//getBoundary("山西省");
	map.enableScrollWheelZoom();
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 
	cx();
 
	
	function loadjsonflag(){
		$.getJSON("../resources/deliveryinfojson.json",function(data){
			var json =data;
			 var content ="";
					for(var i=0;i<json.length;i++){
						if(json[i].result=="true"){
							//var marker = new BMap.Marker(new BMap.Point(json[i].lng,json[i].lat));  // 创建标注
							var myIcon = new BMap.Icon("../resources/map/img/yellow_point.png", new BMap.Size(30,30));
							var marker = new BMap.Marker(new BMap.Point(json[i].lng,json[i].lat),{icon:myIcon});  // 创建标注
							marker.disableMassClear();
							             // 将标注添加到地图中
							    content =json[i].id+"-"+json[i].fusfw+"-"+json[i].jiaoskdd;
							   // marker.data = content;
							    addClickHandler(content,marker);
							    addMouseoverHandler(content,marker);
							    map.addOverlay(marker);  
						  } 
						
					}
				 
					
		});
	}
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			
			  var words=  content.split("-");
			  
					            var id=words[0];
								 var provinces = words[1].split(",");;
								  map.clearOverlays();
								  
								  document.getElementById("mapright").src="<s:url value="/"/>/baidumapcontroller/getDeliveryInfo?sysid="+id;	  
								 
								 for (var i =0; i <  provinces.length; i++) {
									// alert()
									    getBoundary(provinces[i]);
									}
		});
	}
	function addMouseoverHandler(content,marker){
		marker.addEventListener("mouseover",function(){
			
			  var words=  content.split("-");
			  var bzmc=words[2];
	           //alert(bzmc); 
	            var opts = {title : "<span style='font-size:12px;color:#0A8021'>场地名称（点击图标显示详细信息）</span>"};
	            var infoWindow =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:14px;'>"+bzmc+"</div>", opts); 
	            
	            this.openInfoWindow(infoWindow); 
	           
		});
	}	
	
	function cx(){
		 
		$.ajax( {
		    type : "POST",
		    dataType: "json",
		    url : "<s:url value="/"/>baidumapcontroller/getDeliveryList",  
		    data: {}, 
		    success : function(data){ 
		    	
				 var content ="";
					for(var i=0;i<data.length;i++){
						 var obj=data[i];
							//var marker = new BMap.Marker(new BMap.Point(obj.lng,obj.lnt));  // 创建标注
							var myIcon = new BMap.Icon("../resources/map/img/yellow_point.png", new BMap.Size(30,30));
							var marker = new BMap.Marker(new BMap.Point(obj.lng,obj.lnt),{icon:myIcon});  // 创建标注
							marker.disableMassClear();
							             // 将标注添加到地图中
							    content =obj.id+"-"+obj.fusfw+"-"+obj.jiaoskdd;
							   // marker.data = content;
							    addClickHandler(content,marker);
							    addMouseoverHandler(content,marker);
							    map.addOverlay(marker);  
						  
						
					}
		    },
		    error : function()
		    {
		        alert("加载失败");
		    }
		});
	}
		    
	//不使用了	    
	function loadjsonflag2(){
		$.getJSON("../resources/deliveryinfojson.json",function(data){
			var json =data;
					opts = {
							width : 310,     // 信息窗口宽度
							height: 125,     // 信息窗口高度
							title : "信息窗口" , // 信息窗口标题
							enableMessage:true//设置允许信息窗发送短息
						   };
					  var options = {
					            size: BMAP_POINT_SIZE_BIG,
					            shape: BMAP_POINT_SHAPE_RHOMBUS,
					            color: '#EE4000'
					        }
					var txt = "";
					  var points = [];
					  var content ="";
					  //alert(""+json.length);
					for(var i=0;i<json.length;i++){
						
						if(json[i].result=="true"){
							    content =json[i].id+"-"+json[i].fusfw+"-"+json[i].jiaoskdd;
							     
								  var p = new BMap.Point(json[i].lng,json[i].lat);  
						          p.data = content; 
						        
						          points.push(p);  
						} 
						
					}
					 
					   var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
					  
						
					   pointCollection.disableMassClear();
					   pointCollection.addEventListener('click', function (e) {
					          //alert(e.point.data);  // 监听点击事件
					            var words=  e.point.data.split("-");
					            var id=words[0];
								 var provinces = words[1].split(",");;
								  map.clearOverlays();
								  
								  document.getElementById("mapright").src="<s:url value="/"/>/baidumapcontroller/getDeliveryInfo?sysid="+id;	  
								 
								 for (var i =0; i <  provinces.length; i++) {
									// alert()
									    getBoundary(provinces[i]);
									}
					        });
					   pointCollection.addEventListener('mouseover', function (e) {
					          //alert(e.point.data);  // 监听点击事件
					            var words=  e.point.data.split("-");
					            var bzmc=words[2];
					           // alert(bzmc); 
					            var opts = {title : "<span style='font-size:14px;color:#0A8021'>"+bzmc+"</span>"};
					            new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'>显示内容</div>", opts); 
					            this.openInfoWindow(infoWindow); 
					        });					   
					        map.addOverlay(pointCollection);  // 添加Overlay
		});
	}		

		
	    //获取行政区域
		function getBoundary(province){   
			var bdary = new BMap.Boundary();
			bdary.get(province, function(rs){       //获取行政区域
				//map.clearOverlays();        //清除地图覆盖物       
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					//alert('未能获取当前输入行政区域');
					return ;
				}
	          	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillColor: "#FF7F24"}); //建立多边形覆盖物
					 
					map.addOverlay(ply);  //添加覆盖物
					//pointArray = pointArray.concat(ply.getPath());
				}    
				 map.setViewport(7);    //调整视野  
				             
			}); 	
		}
</script>

 
</body>
</html>
